import React from 'react';
import {Avatar, Button, List, Row} from 'antd';
import {useHistory, useParams} from 'react-router-dom';
import util from '@/utils';
import PageHeader from '@/components/page-header';
import styles from './index.less';

const ArticleType: { [key: number]: string } = {
   1: '游园攻略',
   3: '在线互动',
   5: '爱豆',
   6: '知识讲堂'
};
const queryArticlesByType = async (type: number) => {
   const {data} = await util.request({
      url: `/article/type/${type}`
   });
   return data;

};
export default function ArticleList() {
   const history = useHistory();
   const {type} = useParams() as unknown as { type: number };
   const articleListState = React.useState<Array<Article>>([]);
   React.useEffect(() => {
      queryArticlesByType(type).then((data) => {
         articleListState[1](data);
      });
   }, []);
   return <div className={styles.layout}>
      <PageHeader
         onBack={() => history.goBack()}
         title={ArticleType[type]}
      />
      <List<Article>
         itemLayout='horizontal'
         dataSource={articleListState[0]}
         className={styles.articleList}
         header={
            ((type) => {
               if (parseInt(String(type)) === 3) {
                  return <Row align='middle' justify='space-around'>
                     <Button type='link'  onClick={() => {
                        history.push('/complaint');
                     }}>
                        建议或投诉
                     </Button>
                  </Row>;
               }
               if (parseInt(String(type)) === 5) {
                  return <Row align='middle' justify='space-around'>
                     <Button  type='link' onClick={() => {
                        history.push('/tree-adoption');
                     }}>
                        树木认养
                     </Button>
                  </Row>;
               }
            })(type)
         }
         renderItem={item => (
            <List.Item className={styles.item} onClick={() => {
               history.push({
                  pathname: `/article-page/${item.id}`
               });
            }}>
               <List.Item.Meta
                  avatar={<Avatar shape='square' size='large' src={item.thumb} />}
                  title={<b>{item.title}</b>}
                  description={<div className={styles.description}>
                     <span>{item.represent}</span>
                     <span>{item?.date && new Date(item?.date).toLocaleString()}</span>
                     <span>阅读:{item?.count}</span>
                  </div>}
               />
            </List.Item>
         )}
      />,

   </div>;

}
